import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import { SocketContainer } from '@/hooks/useSocket'
import btn_big_n from '@/resource/auctionManage/btn_big_n.png'
import btn_big_s from '@/resource/auctionManage/btn_big_s.png'

import HoverImage from '../components/HoverImg'
import { useEffect } from 'react'
import { useResize } from '@/hooks/useResize'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { send } = SocketContainer.useContainer()
    useResize({ id: 'resize_container' })

    useEffect(() => {
        document.title = '拍卖游戏'
    }, [])

    return (
        <div className={styles.container}>
            <div id="resize_container">
                <div className={styles.block}>
                    <div className={styles.title}>填写:职业价值观拍卖表</div>
                    <div className={styles.content}>老师根据价值观进行每一项的竞拍，学员可以填写金额后，会自动在1000万总金额中减除。每一项结束后，显示拍得前三名！</div>
                </div>
                <div className={styles.info_wrapper}>
                    <HoverImage
                        className={styles.next_btn}
                        placeholderSrc={btn_big_n}
                        src={btn_big_s}
                        onClick={() => {
                            send('step_flow', { params: { step: '4' } })
                        }}
                        wait={800}
                    >
                        开始拍卖
                    </HoverImage>
                </div>
            </div>
        </div>
    )
})
